<template>
  <div>
    <el-tree
      :data="data2"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps">
    </el-tree>

    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes(this.data3);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([5,3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data3:[{
          id: 1,
          path: '/',
          name: 'index',
          redirect: '/base/echart',
          meta: {
            requireAuth: true
          }
        },
          {
            id: 2,
            path: '/base',
            name: 'base',
            redirect: '/base/echart',
            meta: {
              requireAuth: true
            },
            children: [
              {
                id: 5,
                path: '/base/table',
                name: 'table',
                component: 'base/table/table',
                meta: {
                  requireAuth: true
                }
              },
              {
                id: 6,
                path: '/base/menu1',
                name: 'menu1',
                component: 'base/menu1/menu1',
                meta: {
                  requireAuth: true
                }
              },
              {
                id: 7,
                path: '/base/menu2',
                name: 'menu2',
                component: 'base/menu2/menu1',
                meta: {
                  requireAuth: true
                },
                children: [{
                  id: 8,
                  path: '/base/menu2/menu3',
                  name: 'menu13',
                  component: 'base/menu3/menu1',
                  meta: {
                    requireAuth: true
                  }
                }, {
                  id: 9,
                  path: '/base/menu2/menu4',
                  name: 'menu4',
                  component: 'base/menu4/menu1',
                  meta: {
                    requireAuth: true
                  }
                }]
              },
              {
                id: 10,
                path: '/base/menu5',
                name: 'menu5',
                component: 'base/menu5/menu1',
                meta: {
                  requireAuth: true
                }
              }],
            components: {
              header: 'header/header',
              content: 'base/index'
            }
          }],
        data2: [
          {
            id: 1,
            path: '/',
            name: 'index',
            redirect: '/base/echart',
            meta: {
              requireAuth: true
            }
          },
          {
            id: 2,
            path: '/base',
            name: 'base',
            redirect: '/base/echart',
            meta: {
              requireAuth: true
            },
            children: [
              {
                id: 4,
                path: '/base/echart',
                name: 'echart',
                component: 'base/echart/echart',
                meta: {
                  requireAuth: true
                }
              },
              {
                id: 5,
                path: '/base/table',
                name: 'table',
                component: 'base/table/table',
                meta: {
                  requireAuth: true
                }
              },
              {
                id: 6,
                path: '/base/menu1',
                name: 'menu1',
                component: 'base/menu1/menu1',
                meta: {
                  requireAuth: true
                }
              },
              {
                id: 7,
                path: '/base/menu2',
                name: 'menu2',
                component: 'base/menu2/menu1',
                meta: {
                  requireAuth: true
                },
                children: [{
                  id: 8,
                  path: '/base/menu2/menu3',
                  name: 'menu13',
                  component: 'base/menu3/menu1',
                  meta: {
                    requireAuth: true
                  }
                }, {
                  id: 9,
                  path: '/base/menu2/menu4',
                  name: 'menu4',
                  component: 'base/menu4/menu1',
                  meta: {
                    requireAuth: true
                  }
                }]
              },
              {
                id: 10,
                path: '/base/menu5',
                name: 'menu5',
                component: 'base/menu5/menu1',
                meta: {
                  requireAuth: true
                }
              }],
            components: {
              header: 'header/header',
              content: 'base/index'
            }
          },
          {
            id: 3,
            path: '/admin',
            name: 'admin',
            components: {
              header: 'header/header',
              content: 'admin/index'
            },
            meta: {
              requireAuth: true
            }
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    }
  };
</script>
